<template>
  <view>
    <bar-title bgColor='bg-white' :is-back="false">
      <block slot="content">投诉&建议</block>
      <block slot="right">
        <text class="cuIcon-forward"/>
        <text class="cuIcon-more"/>
      </block>
    </bar-title>
    <view class="feedback-body">
      <text class="text-black">问题反馈和意见建议
        <text style="color: red;">*</text></text>
      <textarea placeholder="请描述您遇到的问题或对本产品的建议..." v-model="sendData.feedbackContent" class="feedback-textare" maxlength="-1"/>

      <text class="text-black">联系方式<text style="color: red;">*</text> </text>
      <input class="feedback-input" v-model="sendData.mobile" placeholder="请输入您的手机号" type="number" />
      <view class="btn">
        <button type="primary" @click="submit" >
          提交
        </button>
      </view>

    </view>
  </view>

</template>

<script>
import barTitle from "../../components/common/bar-title";
import {addFeedback} from "../../common/http";

export default {
  components: {
    barTitle
  },
  data() {
    return {
      sendData: {
        feedbackContent: '', //反馈内容
        mobile: '', //联系方式
        imgs: []
      },
      btnLoading: false
    };
  },
  onLoad() {

  },
  methods: {
    submit(){
      if(!this.sendData.feedbackContent){
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none'
        });
        return;
      }
      if(!this.sendData.mobile){
        uni.showToast({
          title: '请输入联系方式',
          icon: 'none'
        });
        return;
      }
      // 验证通过
      let params = {
        text: this.sendData.feedbackContent, //反馈内容
        mobile: this.sendData.mobile //手机号码
      }
      addFeedback(params).then(res => {
        if(res.data.code == 0){
          uni.showToast({
            title: '感谢您的反馈',
            icon: 'none',
            duration: 2000,
            success: function () {
              setTimeout(function () {
                uni.navigateBack();
              }, 2000);
            }
          });
        }
      })
    }
  }
};
</script>

<style>
.text-black {
  color: #303133;
  font-size: 32rpx;
}

.text-grey {
  color: #BCBCBC;
  font-size: 24rpx;
  margin-left: 15rpx;
}

.feedback-quick {
  padding-right: 10rpx;
  color: #606266;
  font-size: 32rpx;
}

.feedback-body {
  padding: 30rpx;
}

.feedback-textare {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  height: 266rpx;
  color: #303133;
  font-size: 28rpx;
  line-height: 2em;
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  border-radius: 20rpx;
  background-color: #F5F6F8;
}

.feedback-input {
  font-size: 28rpx;
  color: #303133;
  background-color: #F5F6F8;
  border-radius: 20rpx;
  height: 100rpx;
  min-height: 100rpx;
  padding: 0 30rpx;
  margin-top: 30rpx;
  margin-bottom: 60rpx;
  width: 100%;
}



.btn-submit {
  border-radius: 20rpx;
  color: #FFFFFF;
  margin-top: 100rpx;
  background-color: #007AFF;
  margin-bottom: 70rpx;
}

.image-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #606266;

}

.filepicker {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.btn {
  position: fixed;
  bottom: 0;
  left: 0 ;
  right: 0;
  margin: 30rpx 30rpx 60rpx 30rpx;
}
</style>
